<template>
  <div class="cartPage">
    <div class="cartTop">我的全部购物车</div>
    <div class="wrapper">
      <template v-for="(item, index) in dataList" :key="index">
        <div class="shop" v-if="item.totalItems != 0">
          <div class="shopName">{{ item?.shopName }}</div>
          <div
            class="item"
            v-for="(innerItem, innerIndex) in item.detail"
            :key="innerIndex"
            @click="
              () => {
                handleCart(index);
              }
            "
          >
            <div class="item__img">
              <img class="img" :src="innerItem.imgUrl" alt="" />
            </div>
            <div class="item__detail">
              <div class="item__detail__name">{{ innerItem.name }}</div>
              <div class="item__detail__count">
                &yen;{{ innerItem.price }} x {{ innerItem.count }}
              </div>
            </div>
            <div class="item__totalPrice">
              &yen;{{ (innerItem.price * innerItem.count).toFixed(2) }}
            </div>
          </div>
          <div class="summary">共计{{ item.totalItems }}件</div>
        </div>
      </template>
      <div class="empty" v-if="cartNum">
        {{ "暂无购物数据" }}
      </div>
    </div>
  </div>
  <Docker :activeIndex="1" />
</template>

<script>
import { computed, ref } from "vue";
import { useCommonCartEffect } from "@/effects/cartEffect.js";
import { useRouter } from "vue-router";

import Docker from "@/components/docker.vue";
export default {
  name: "cart",
  components: { Docker },
  setup() {
    const { cartList } = useCommonCartEffect();
    const router = useRouter();
    const dataList = computed(() => {
      const list = [];
      for (let key in cartList) {
        let totalCount = 0;
        let totalPrice = 0;
        let totalItems = 0;
        const shop = cartList[key];
        let shopName = shop.shopName;
        for (let g in shop.productList) {
          const item = shop.productList[g];
          totalItems += 1;
          totalCount += item.count;
          totalPrice += item.count * item.price;
        }
        list.push({
          shopName,
          totalCount,
          totalPrice,
          totalItems,
          detail: shop.productList,
        });
      }
      return list;
    });
    //跳转页面
    const handleCart = (innerIndex) => {
      router.push(`/orderconfirmation/${innerIndex}`);
    };

    //判断是否没有订单
    let cartNum = ref(true);
    for (let k of dataList.value) {
      if (k.totalItems > 0) {
        cartNum.value = false;
        break;
      }
    }

    return { dataList, handleCart, cartNum };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.cartPage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  background-color: $searchBgc-color;
}
.cartTop {
  width: 100%;
  height: 0.45rem;
  line-height: 0.45rem;
  text-align: center;
  font-size: 0.16rem;
  color: $content-color;
  background-color: $white-color;
}

.shop {
  width: 100%;
  margin-top: 0.16rem;
  background-color: $white-color;
  border-radius: 0.04rem;
  padding: 0.16rem;
  padding-top: 0;

  .shopName {
    line-height: 0.5rem;
    font-size: 0.16rem;
    font-weight: 600;
    color: $content-color;
  }
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.16rem;
    &__img {
      .img {
        width: 0.46rem;
        height: 0.46rem;
      }
    }
    &__detail {
      height: 0.46rem;
      margin-right: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &__name {
        font-size: 0.14rem;
        color: $content-color;
      }
      &__count {
        font-size: 0.14rem;
        color: $highlight-color;
      }
    }
    &__totalPrice {
      align-self: flex-end;
      font-size: 0.14rem;
      color: #000000;
      text-align: right;
    }
  }
  .summary {
    width: 3.08rem;
    height: 0.28rem;
    line-height: 0.28rem;
    text-align: center;
    font-size: 0.16rem;
    background-color: $searchBgc-color;
    color: $light-font-color;
  }
}

.empty {
  margin-top: 0.45rem;
  text-align: center;
  color: $plc-color;
  font-size: 0.18rem;
}
</style>
